<template>
  <div class="overview-style">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人库" name="first">
        <div>
          <el-input style="width: 300px" placeholder="搜索常用语" v-model="searchKeyword" clearable></el-input>
          <el-button type="primary">搜索</el-button>
          <el-button style="float:right;">导入常用语</el-button>
          <el-button style="float:right;" type="primary" @click="addword1Visible=true">添加常用语</el-button>
          <el-button style="float:right;" type="primary" @click="addclass1Visible=true">添加分类</el-button>
        </div>
        <div style="padding-top: 10px">
          <el-collapse v-model="activeNames" accordion @change="handleChange">
            <div v-for="(items, index) in personalData" :key="items">
              <el-button
                style="position: absolute;right: 100px"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editDialogVisible=true"
              ></el-button>
              <el-button
                style="position: absolute;right: 50px"
                type="primary"
                icon="el-icon-delete"
                circle
                @click="deleteDialogVisible=true"
              ></el-button>
              <el-collapse-item :name="index">
                <template style="position: relative;" slot="title">
                  <label style="font-size: 16px">{{items[0].type}}</label>
                </template>
                <template>
                  <el-table
                    :data="items"
                    style="width: 100%"
                    :show-header="status"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column class="item" prop="content"></el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          class="header-icon el-icon-edit"
                          style="position: absolute;right: 100px"
                          type="primary"
                          size="mini"
                          circle
                          @click="editword1Visible=true"
                        ></el-button>
                        <el-button
                          class="header-icon el-icon-delete"
                          style="position: absolute;right: 50px"
                          type="primary"
                          size="mini"
                          circle
                          @click="deleteDialogVisible=true"
                        ></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-collapse-item>
            </div>
          </el-collapse>
        </div>
      </el-tab-pane>
      <el-tab-pane label="公共库" name="second">
        <div>
          <el-input style="width: 300px" placeholder="搜索常用语" v-model="searchKeyword" clearable></el-input>
          <el-button type="primary">搜索</el-button>
          <el-button style="float:right;">导入常用语</el-button>
          <el-button style="float:right;" type="primary" @click="addword2Visible=true">添加常用语</el-button>
          <el-button style="float:right;" type="primary" @click="addclass2Visible=true">添加分类</el-button>
        </div>
        <div style="padding-top: 10px">
          <el-collapse v-model="activeNames" accordion @change="handleChange">
            <div v-for="(items, index) in publicData" :key="items">
              <el-button
                style="position: absolute;right: 100px"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editDialogVisible=true"
              ></el-button>
              <el-button
                style="position: absolute;right: 50px"
                type="primary"
                icon="el-icon-delete"
                circle
                @click="deleteDialogVisible=true"
              ></el-button>
              <el-collapse-item :name="index">
                <template style="position: relative;" slot="title">
                  <label style="font-size: 16px">{{items[0].type}}</label>
                </template>
                <template>
                  <el-table
                    :data="items"
                    style="width: 100%"
                    :show-header="status"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column class="item" prop="content"></el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          class="header-icon el-icon-edit"
                          style="position: absolute;right: 100px"
                          type="primary"
                          size="mini"
                          circle
                          @click="editword1Visible=true"
                        ></el-button>
                        <el-button
                          class="header-icon el-icon-delete"
                          style="position: absolute;right: 50px"
                          type="primary"
                          size="mini"
                          circle
                          @click="deleteDialogVisible=true"
                        ></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-collapse-item>
            </div>
          </el-collapse>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="添加常用语" top="9vh" :visible.sync="addword1Visible" width="33%">
      <div class="add2-dialog-style">
        <el-form ref="addOrderForm" :model="addword1Form" label-position="left" label-width="120px">
          <el-form-item :rules="{  message: '请选择'}" label="选择分类">
            <el-select style="width:100%;" v-model="addword1Form.name1" placeholder="请选择">
              <el-option label="默认分组" value="option1"></el-option>
              <el-option label="欢迎语" value="option2"></el-option>
              <el-option label="业务相关" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{  message: '请输入常用语'}" label="常用语内容">
            <el-input type="textarea" :rows="6" v-model="addword1Form.name2" placeholder="请输入常用语"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="addword1Visible = false">取消</el-button>
        <el-button type="primary" @click="addword1Visible = false">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑常用语" top="9vh" :visible.sync="editword1Visible" width="33%">
      <div class="add2-dialog-style">
        <el-form
          ref="addOrderForm"
          :model="editword1Form"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{  message: '请选择'}" label="选择分类">
            <el-select style="width:100%;" v-model="editword1Form.name1" placeholder="请选择">
              <el-option label="默认分组" value="option1"></el-option>
              <el-option label="欢迎语" value="option2"></el-option>
              <el-option label="业务相关" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{  message: '请输入常用语'}" label="常用语内容">
            <el-input type="textarea" :rows="6" v-model="editword1Form.name2" placeholder="请输入常用语"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="editword1Visible = false">取消</el-button>
        <el-button type="primary" @click="editword1Visible = false">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加常用语" top="9vh" :visible.sync="addword2Visible" width="33%">
      <div class="add2-dialog-style">
        <el-form ref="addOrderForm" :model="addword2Form" label-position="left" label-width="120px">
          <el-form-item :rules="{ message: '请选择'}" label="选择分类">
            <el-select style="width:100%;" v-model="addword2Form.name1" placeholder="请选择">
              <el-option label="默认分组" value="option1"></el-option>
              <el-option label="欢迎语" value="option2"></el-option>
              <el-option label="业务相关" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{ message: '请输入常用语'}" label="常用语内容">
            <el-input type="textarea" :rows="6" v-model="addword2Form.name2" placeholder="请输入常用语"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="addword2Visible = false">取消</el-button>
        <el-button type="primary" @click="addword2Visible = false">创建工单</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加分类" top="9vh" :visible.sync="addclass1Visible" width="33%">
      <div class="add1-dialog-style">
        <el-form
          ref="addOrderForm"
          :model="addclass1Form"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{  message: '请输入分类名称'}" label="分类名称">
            <el-input style="width:100%;" v-model="addclass1Form.name1" placeholder="请输入分类名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="addclass1Visible = false">取消</el-button>
        <el-button type="primary" @click="addclass1Visible = false">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加分类" top="9vh" :visible.sync="addclass2Visible" width="33%">
      <div class="add1-dialog-style">
        <el-form
          ref="addOrderForm"
          :model="addclass2Form"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{ message: '请输入分类名称'}" label="分类名称">
            <el-input style="width:100%;" v-model="addclass2Form.name1" placeholder="请输入分类名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="addclass2Visible = false">取消</el-button>
        <el-button type="primary" @click="addclass2Visible = false">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑分类" top="9vh" :visible.sync="editDialogVisible" width="33%">
      <div class="add1-dialog-style">
        <el-form ref="addOrderForm" :model="editForm" label-position="left" label-width="120px">
          <el-form-item :rules="{  message: '请输入分类名称'}" label="分类名称">
            <el-input style="width:100%;" v-model="editForm.name1" placeholder="请输入分类名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="删除确认" :visible.sync="deleteDialogVisible" top="34vh" width="26%">
      <div class="delete-dialog-style">删除后无法恢复，确定删除此信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteDialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import api from "@/api/api";
export default {
  name: "SettingCommonWord",
  components: {},
  props: {},
  data() {
    return {
      status: false,
      flag: false,
      activeName: "first",
      activeNames: ["1"],
      addword1Visible: false,
      addclass1Visible: false,
      addword2Visible: false,
      addclass2Visible: false,
      editDialogVisible: false,
      editword1Visible: false,
      addword1Form: {
        name1: "",
        name2: ""
      },
      editword1Form: {
        name1: "",
        name2: ""
      },
      addword2Form: {
        name1: "",
        name2: ""
      },
      addclass1Form: {
        name1: ""
      },
      addclass2Form: {
        name1: ""
      },
      editForm: {
        name1: ""
      },
      deleteDialogVisible: false,
      isLoading: false,
      totalData: 0,
      personalData: [],
      publicData: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleChange(val) {
      // console.log(val);
    },
    tableRowClassName() {
      return "modify-row";
    },
    partitionData(arrayData) {
      let res = [];
      arrayData.sort((a, b) => {
        return a.type < b.type ? -1 : 1;
      });
      let tempTag = arrayData[0].type;
      let tempArray = [];
      for (let i in arrayData) {
        if (arrayData[i].type === tempTag) {
          tempArray.push(arrayData[i]);
        } else {
          tempTag = arrayData[i].type;
          res.push(tempArray);
          tempArray = [arrayData[i]];
        }
      }
      res.push(tempArray);
      return res;
    },
    getPageData() {
      this.isLoading = true;
      api.getAllCommonWordAPI().then(res => {
        this.isLoading = false;
        let { error, data } = res.data;
        if (error) {
          this.$message.error("请求接口异常");
        } else {
          this.totalData = data.total;
          data.page.forEach(item => {
            if (item.lib == "公共库") {
              this.publicData.push(item);
            } else {
              this.personalData.push(item);
            }
          });
          this.publicData = this.partitionData(this.publicData);
          this.personalData = this.partitionData(this.personalData);
          console.log(this.publicData);
        }
      });
    }
  },
  created() {
    this.getPageData();
  },
  mounted() {}
};
</script>

<style scoped>
.overview-style {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}

.header-icon {
  margin-top: -8px;
}

.add1-dialog-style {
  height: 50px;
  overflow: auto;
  padding: 20px 0 10px 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.add2-dialog-style {
  height: 200px;
  overflow: auto;
  padding: 20px 0 10px 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.delete-dialog-style {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  padding: 20px;
  padding-bottom: 70px;
}
</style>
<style>
.el-tabs__item {
  margin-bottom: 20px;
}
.el-table .modify-row {
  background: #e6f1ff;
}
</style>
